<template>
  <div ref="myMap" style="width: 100%; height: 680px" />
</template>

<script>
import * as echarts from "echarts";
import {
  geoJson,
  geoGpsMap,
  geoCoordMap,
  colors,
  colorIndex,
  randomNum,
} from "./map";
export default {
  name: "MyRadar",
  data: () => ({
    myEcharts: {},
  }),
  watch: {
    list: {
      deep: true,
      // handler(newVal) {
      //   // const { series: [{ data }] } = radarData
      //   data[0] = { value: newVal.user_woman, name: '女' }
      //   data[1] = { value: newVal.user_man, name: '男' }
      //   this.myEcharts.setOption(radarData)
      // }
    },
  },
  mounted() {
    this.myEcharts = echarts.init(this.$refs.myMap);
    var year = ["2019", "2020", "2021", "2022", "2023"];
    var mapData = [[], [], [], [], [], []];

    /* 柱子Y名称*/
    var categoryData = [];
    var barData = [];
    for (var key in geoCoordMap) {
      categoryData.push(key);
      mapData[0].push({
        year: "2014",
        name: key,
        value: randomNum(100, 300),
      });
      mapData[1].push({
        year: "2015",
        name: key,
        value: randomNum(100, 300),
      });
      mapData[2].push({
        year: "2016",
        name: key,
        value: randomNum(100, 300),
      });
      mapData[3].push({
        year: "2017",
        name: key,
        value: randomNum(100, 300),
      });
      mapData[4].push({
        year: "2018",
        name: key,
        value: randomNum(100, 300),
      });
    }
    for (var i = 0; i < mapData.length; i++) {
      barData.push([]);
      for (var j = 0; j < mapData[i].length; j++) {
        barData[i].push(mapData[i][j].value);
      }
    }

    echarts.registerMap("china", geoJson);
    var convertData = function (data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value),
          });
        }
      }
      return res;
    };

    const optionXyMap01 = {
      timeline: {
        data: year,
        axisType: "category",
        autoPlay: true,
        playInterval: 3000,
        left: "10%",
        right: "8%",
        bottom: "-20%",
        width: "80%",
        //  height: null,
        label: {
          normal: {
            textStyle: {
              color: "#ddd",
            },
          },
          emphasis: {
            textStyle: {
              color: "#fff",
            },
          },
        },
        symbolSize: 10,
        lineStyle: {
          color: "#555",
        },
      },
      baseOption: {
        animation: true,
        animationDuration: 1000,
        animationEasing: "cubicInOut",
        animationDurationUpdate: 1000,
        animationEasingUpdate: "cubicInOut",
        grid: {
          right: "3%",
          top: "15%",
          bottom: "10%",
          width: "20%",
        },
        tooltip: {
          trigger: "axis", // hover触发器
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            shadowStyle: {
              color: "rgba(150,150,150,0.1)", // hover颜色
            },
          },
        },
        geo: {
          show: true,
          map: "china",
          roam: true,
          zoom: 1,
          center: [105, 35],
          label: {
            emphasis: {
              show: false,
            },
          },
        },
      },
      options: [],
    };
    for (var n = 0; n < year.length; n++) {
      optionXyMap01.options.push({
        backgroundColor: "#051b4a",
        title: [
          {},
          {
            id: "statistic",
            textStyle: {
              color: "#fff",
              fontSize: 28,
            },
          },
        ],

        series: [
          // 未知作用
          {
            // 文字和标志
            name: "light",
            type: "scatter",
            coordinateSystem: "geo",
            data: convertData(mapData[n]),
            symbolSize: function (val) {},
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: true,
              },
            },
          },
          // 地图？
          {
            type: "map",
            map: "china",
            geoIndex: 0,
            aspectScale: 0.75, // 长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: "#fff",
                },
              },
            },
            roam: true,

            animation: false,
            data: mapData,
          },
        ],
      });
    }
    this.myEcharts.setOption(optionXyMap01);
  },
  methods: {},
};
</script>

<style></style>
